<!DOCTYPE html>
<html >
<head>

		<style type="text/css">
			@import "../../../../dijit/themes/claro/claro.css";
		</style>
	<style type="text/css">
/* BEGIN .. css :: Things in this section have to be two tabs in */
	
        .row { width: 500px; display: inline-block; margin: 5px; }
        .cell { width: 20%;  display:inline-block; }

/* END .. css :: Things in this section have to be two tabs in */
</style>
<script src="../../../../dojo/dojo.js" data-dojo-config='parseOnLoad: true, mvc: {debugBindings: true}'></script>
<script>
/* BEGIN .. js :: Things in this section have to be two tabs in */

		var searchRecords; 
		require([
			'dojo/parser',
			'dojo/ready',
			'dojox/mvc/getStateful',
			'dijit/form/TextBox',
			'dijit/form/Button',
			'dojox/mvc/Group',
			'dojox/mvc/Repeat',
			'dojox/mvc/Output'
			], function(parser, ready, getStateful){

			// Initial data
			var search_results_init = {
  			"identifier": "Serial",
   			"items": [ 
                    {
                        "Serial"  : "A111",
                        "First"   : "Anne",
                        "Last"    : "Ackerman",
                        "Email"   : "a.a@test.com"
                    },
                    {
                        "Serial"  : "B111",
                        "First"   : "Ben",
                        "Last"    : "Beckham",
                        "Email"   : "b.b@test.com"
                    },
                    {
                        "Serial"  : "I111",
                        "First"   : "Irene",
                        "Last"    : "Ira",
                        "Email"   : "i.i@test.com"
                    },
                    {
                        "Serial"  : "J111",
                        "First"   : "John",
                        "Last"    : "Jacklin",
                        "Email"   : "j.j@test.com"
                    }
                ]
			};
				// The getStateful call will take json data and create make it Stateful
				searchRecords = getStateful(search_results_init);
			});

/* END .. js :: */
</script>
</head>
<body class="claro">
<!--  BEGIN .. html :: THINGS IN HERE START TWO TABS IN -->	

		<script type="dojo/require">at: "dojox/mvc/at"</script>
		<div id="main">
		<div data-dojo-type="dojox/mvc/Group" data-dojo-props="target: searchRecords">
        <!--
            The repeat container denotes a templated UI that operates over a collection
            of data records.
            The UI can be customized for each iteration using properties such as
            ${this.index} for the iteration index.
        -->
        	<h4>Repeat with TextBox for First and Last properties: </h4>        
        	<div id="repeatId" data-dojo-type="dojox/mvc/Repeat" data-dojo-props="children: at('rel:', 'items')">
            <div class="row" data-dojo-type="dojox/mvc/Group" data-dojo-props="target: at('rel:', ${this.index})">
                <label class="cell" for="nameInput${this.index}">Name:</label>
                <input class="cell" data-dojo-type="dijit/form/TextBox" id="nameInput${this.index}"
                                    data-dojo-props="value: at('rel:', 'First')"></input>
                <input class="cell" data-dojo-type="dijit/form/TextBox"
                                    data-dojo-props="value: at('rel:', 'Last')"></input>
            </div>
        </div>
        <h4>Repeat with mvc/Output for First and Last properties, will be updated when the TextBox is updated: </h4>        
        <div id="repeatIdOutput" data-dojo-type="dojox/mvc/Repeat" data-dojo-props="children: at('rel:', 'items')">
            <div class="row" data-dojo-type="dojox/mvc/Group" data-dojo-props="target: at('rel:', ${this.index})">
                <label class="cell" for="nameOutput${this.index}">Name:</label>
                <div class="cell" data-dojo-type="dojox/mvc/Output" id="nameOutput${this.index}"
                                    data-dojo-props="value: at('rel:', 'First')"></div>
                <div class="cell" data-dojo-type="dojox/mvc/Output"
                                    data-dojo-props="value: at('rel:', 'Last')"></div>
            </div>
        </div>
		</div>
        <p>In the above example, the TextBoxes inside the repeat will display the firstname of each of the entries in the model.
		</div>

<!--  END .. html :: THINGS IN HERE START TWO TABS IN -->	
</body>
</html>
